<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>角色</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="../js/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- 引入axios -->
		<script src="../js/axios.js"></script>
		<script src="../js/qs.js"></script>
		<!-- 导入jquery -->
		<script src="../js/jquery.min.js"></script>
	</head>
	<body>
		<div style="margin-left: 15px; margin-top:10px ;" id="app1">
			<div style="width: 100%;margin-left: 15px;height:60px;  display: block;">
				<i class="el-icon-caret-right" style="line-height: 40px;margin-right: 5px; float: left;"></i>
				<template style="margin-top: 20px;">
					<el-select v-model="value7" @change="findchange()" filterable placeholder="全部数据" style="float: left;width: 120px; height: 60px;">
						<el-option v-for="item in allcomoptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</template>
				<i class="el-icon-search" style="line-height: 40px;float: left;margin-left: 10px; width: 50px; height: 50px;"></i>
				<!-- 搜索框 -->
				<div style="display: block;margin-left: -20px;float: left; cursor: pointer;">
					<el-input style="width: 200px;" placeholder="" v-model="inputtheme">
						<el-button slot="append" @click="searchRole()"  style=" width: 80px;">
							角色
						</el-button>
					</el-input>
				</div>
			</div>
			
			<!-- 新建回款记录 -->
			
			<span style="font-size: 13px; color: #333333;">角色记录<a style="font-size: 12px;color: #807E7E;">&nbsp;共${page.total}条</a></span>
			<div style=" width: 98%;padding-left: 5px;">
				<el-button size="small" icon="el-icon-circle-plus" style="float: right; margin-top: -40px;" @click="addRole()"
				 style="width: 80px;"> 新建</el-button>

				<el-dialog title="添加角色" width="55%" :visible.sync="addRoledialog">
					<hr style="border: 0.5px solid #666666;margin: -15px 0px 35px;" />
					<el-form :rules="rules" ref="addRolefroms" :model="addRolefroms">
						<el-row :gutter="10">
							<el-form-item label="名称:" required prop="roleName" :label-width="formLabelWidth">
								<el-input v-model="addRolefroms.roleName" style="width: 80%;" placeholder="请输入名称"></el-input>
							</el-form-item>
						</el-row>
						<el-row :gutter="10">
							<el-form-item label="描述:"  prop="roleDescript" :label-width="formLabelWidth">
								<el-input type="textarea" :rows="12" :autosize="{ minRows: 2}" placeholder=""  v-model="addRolefroms.roleDescript" style="width: 80%;"></el-input>
							</el-form-item>
						</el-row>
						<el-row :gutter="10">
							<el-form-item label="状态:" required prop="roletate" :label-width="formLabelWidth">
								<template>
									<el-radio v-model="addRolefroms.roletate" :label="1283">启用</el-radio>
									<el-radio v-model="addRolefroms.roletate" :label="1285">禁用</el-radio>
								</template>
							</el-form-item>
						</el-row>
						<el-row :gutter="10">
							<el-form-item label="菜单列表:"  prop="roletate" :label-width="formLabelWidth">
								<el-row :gutter="10">
									<div></div>
								</el-row>
								<el-row :gutter="10">
									<!-- {{myVal}} -->
									<div>
										<div id="" v-for="(value, key, index) in menusList" >
										<span >
												<el-checkbox @change="checkboxMenus(value.map,value.mapList)"  v-model="myVal" fill="#999999"  style="color: #565656;"  :label="value.map.pId" :key="value.map.pId">{{value.map.pName}}</el-checkbox>
											</span><br/>
											<el-form-item  :label-width="formLabelWidth1">
												<div style="float: left; margin-top: 20px; margin-bottom: 20px; margin-left: 40px; color: #888888;" v-for="(value1, key, index) in value.mapList">
													<el-checkbox  @change="checkboxMenus1(value.map,value.mapList,value1.pId,this)"  v-model="myVal"  text-color="#999999"  :label="value1.pId" :key="value1.pId">{{value1.pName}}</el-checkbox>
												</div>
											</el-form-item>
											
										</div >
									</div>
								</el-row>
							</el-form-item>
						</el-row>
					</el-form>


					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<!-- dialogFormVisible = false -->
						<el-button type="primary" @click="submitRoleForm('addRolefroms')">保存</el-button>
					</div>
				</el-dialog>

			</div>
			<div style=" height: 40px;  width: 98.5%;">
					<el-dialog title="添加角色" width="55%" :visible.sync="updateRoledialog">
						<hr style="border: 0.5px solid #666666;margin: -15px 0px 35px;" />
						<el-form :rules="rules" ref="updateRolefroms" :model="updateRolefroms">
							<el-row :gutter="10">
								<el-form-item label="名称:" required prop="roleName" :label-width="formLabelWidth">
									
									<el-input v-model="updateRolefroms.roleName" style="width: 80%;" placeholder="请输入名称"></el-input>
								</el-form-item>
							</el-row>
							<el-row :gutter="10">
								
								<el-form-item label="描述:"  prop="roleDescript" :label-width="formLabelWidth">
									<el-input type="textarea" :rows="12" :autosize="{ minRows: 2}" placeholder=""  v-model="updateRolefroms.roleDescript" style="width: 80%;"></el-input>
								</el-form-item>
							</el-row>
							<el-row :gutter="10">
								<el-form-item label="状态:" required prop="roletate" :label-width="formLabelWidth">
									<template>
										<el-radio v-model="updateRolefroms.roletate" :label="1283">启用</el-radio>
										<el-radio v-model="updateRolefroms.roletate" :label="1285">禁用</el-radio>
									</template>
								</el-form-item>
							</el-row>
							<el-row :gutter="10">
								<el-form-item label="菜单列表:"  prop="roletate" :label-width="formLabelWidth">
									<el-row :gutter="10">
										<div></div>
									</el-row>
									<el-row :gutter="10">
										<!-- {{myVal}} -->
										<div>
											<div id="" v-for="(value, key, index) in menusList" >
											<span >
													<el-checkbox @change="checkboxMenus(value.map,value.mapList)"  v-model="myVal" fill="#999999"  style="color: #565656;"  :label="value.map.pId" :key="value.map.pId">{{value.map.pName}}</el-checkbox>
												</span><br/>
												<el-form-item prop="roletate" :label-width="formLabelWidth1">
													<div style="float: left; margin-top: 20px; margin-bottom: 20px; margin-left: 40px; color: #888888;" v-for="(value1, key, index) in value.mapList">
														<el-checkbox @change="checkboxMenus1(value.map,value.mapList,value1.pId,this)"  v-model="myVal"  text-color="#999999"  :label="value1.pId" :key="value1.pId">{{value1.pName}}</el-checkbox>
													</div>
												</el-form-item>
												
											</div >
										</div>
									</el-row>
								</el-form-item>
							</el-row>
						</el-form>
					
					
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<!-- dialogFormVisible = false -->
							<el-button type="primary" @click="updateRoleForm('updateRolefroms')">保存</el-button>
						</div>
					</el-dialog>
					

				<template>
					<el-table ref="multipleTable" tooltip-effect="dark" :data="multipleTable" border style="width: 100%;color: black;">
						<el-table-column type="selection" width="35" align="center">
						</el-table-column>
						<el-table-column prop="roleId" label="编号" width="60" align="center">
						</el-table-column>
						<el-table-column prop="roleName" label="角色名称"  width="200" align="center">
						</el-table-column>
						<el-table-column prop="roleDate" label="创建时间" width="100" align="center">
						</el-table-column>
							<el-table-column prop="roleState" label="状态" width="100" align="center">
						</el-table-column>
						<el-table-column prop="roleDescript" label="描述" align="center">
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="100" align="center">
							<template slot-scope="scope">
								<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">编辑</div>
									<i class="el-icon-edit" @click="updatehandleClick(scope.row.roleId)" style="font-size: 17px;"></i>
								</el-tooltip>
								<el-tooltip content="Bottom center" placement="bottom">
									<div slot="content">删除</div>
									<i class="el-icon-delete" style="margin: 0px 10px;font-size: 17px;" @click="deleterolehow(scope.row.ID)"></i>
								</el-tooltip>

								<el-dialog title="提示" :visible.sync="dialogDelete" width="30%" append-to-body>
									<span>你确定要删除吗？</span>
									<span slot="footer" class="dialog-footer">
										<el-button @click="dialogDelete = false">取 消</el-button>
										<el-button type="primary" @click="dialogDelete = false" v-on:click="DeleteRole">确 定</el-button>
									</span>
								</el-dialog>

							</template>
						</el-table-column>
					</el-table>
					<div style="margin-top: 10px">
						<div style="display: block; float: left;margin-left: 5px;">
							<el-tooltip content="Bottom center" placement="bottom">
								<div slot="content">删除</div>
								<i class="el-icon-delete" style="margin: 8px;font-size: 17px;"></i>
							</el-tooltip>
						</div>
						<!-- 分页 -->
						<div style="display: block; float: left; margin-left: 220px;">
							<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
							 :page-sizes="[4, 6, 8,10]" :page-size="pages.pageSize" layout="total, sizes,prev, pager, next, jumper" :total="pages.total">
							</el-pagination>
						</div>
						<div style="display: block; float: right;margin-right: 15px;">
							<el-tooltip content="Bottom center" placement="bottom">
								<div slot="content">打印</div>
								<el-button circle size="mini"><i class="el-icon-printer" style="font-size: 17px;"></i></el-button>&nbsp;
							</el-tooltip>

							<el-tooltip content="Bottom center" placement="bottom">
								<div slot="content">导出Excel</div>
								<el-button circle size="mini"><i class="el-icon-tickets" style="font-size: 17px;"></i></el-button>
							</el-tooltip>

						</div>
					</div>
				</template>
			</div>
		</div>
		<script type="text/javascript">
			var pageinfo = ${
				pagejson
			};
			var listTable = ${
				list
			};
			var mlist= ${menusList};
			var app1 = new Vue({
				el: "#app1",
				data: {
					formLabelWidth: '90px',
					formLabelWidth1: '30px',
					allcomoptions: [{
						value: '0',
						label: '全部数据'
					},{
						value: '1283',
						label: '启用'
					},{
						value: '1285',
						label: '禁用'
					}],
					allcominfor: '',
					complaintheme: '',
					value7:'',
					myVal:[],
					addRoledialog: false,
					updateRoledialog: false,
					multipleTable: listTable,
					menusList:mlist,
					rules: {
						roleName: [{
							required: true,
							message: '请输入名称',
							trigger: 'change',
							required: true,
							message: '请输入名称',
							trigger: 'blur'
						}, ],
						roletate: [{
							required: true,
							message: '请选择状态',
							trigger: 'change',
							required: true,
							message: '请选择状态',
							trigger: 'blur'
						}, ],
					},
					addRolefroms: {
						roleId: '',
						roleName: '',
						roletate: 1283,
						roleDescript: '',
						menus:'',
					},
					updateRolefroms: {
						roleId: '',
						roleName: '',
						roletate: '',
						roleDescript: '',
						menus:'',
					},
					findDept: [],
					findDepts: [],
					pages: pageinfo,
					currentPage4: pageinfo.pageNum, 
					dialogDelete: false,
					inputtheme:'',

				},
				methods: {
					checkboxMenus(menus,mapList){
						var x=0;
						//循环遍历是否被选中
						for( var j of this.myVal){
							
							if(j==menus.pId){
								x=1;
							}
						}
						//已经被选中
						if(x==0){
							for(let  i of mapList){
								this.myVal=this.myVal.map(res=>{
									if(res!=i.pId ){return res;}
								});
							}
						}else{
							for(let  i of mapList){
								this.myVal.push(i.pId);
							}
						}
						this.myVal= Array.from(new Set(this.myVal));
						this.myVal=this.myVal.map(res=>{
							if(res!=null|| res !="null"){return res;}
						});
					},
					checkboxMenus1(menus,mapList,id){
						var mid=menus.pId;
						var j = 0;
						//判断是否有子元素被选中
						for(let  i of mapList){
							this.myVal.map(res=>{
								//已经被选中
								if(res==i.pId){
									j++;
								}
							});
						}
						if(j==0){
							this.myVal=this.myVal.map(res=>{
								if(res!=mid ){return res;}
							});
						}else{
							this.myVal.push(menus.pId);
						}
						this.myVal= Array.from(new Set(this.myVal));
						this.myVal=this.myVal.map(res=>{
							if(res!=null|| res !="null"){return res;}
						});
						   
					},
					addDept() {
						var _this = this;
						axios.post("/authority/addDeptview",
							//ajax请求成功的回调函数
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data);
							//将数据装换成界面显示
							//客户信息
							_this.findDepts = v.data.deptAll.map(item => {
								return {
									value: item.id,
									label: item.name
								};
							});
							var a = {
								value: 0,
								label: "最高层级"
							};
							_this.findDepts.push(a);
							_this.findDept = _this.findDepts;
							console.log(_this.findDepts);
							_this.addDeptdialog = true;
						}).catch(function() {
							alert("信息出错了");
						});
					},
					addRole() {
						this.myVal=[];
						var _this = this;
						axios.post("/authority/addRoleview",
							//ajax请求成功的回调函数
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data);
							//将数据装换成界面显示
							//客户信息
							 _this.menus= v.data.menusList;
							_this.addRoledialog = true;
						}).catch(function() {
							alert("信息出错了");
						});
					},
					clickDept(id) {
						alert(id);
					},
					updateDept(id) {
						
						var _this = this;
						axios.post("/authority/updateDeptview",
							Qs.stringify({
								'ID': id,
							}, {
								arrayFormat: 'brackets'
							})
							//ajax请求成功的回调函数
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data);
							//将数据装换成界面显示
							//客户信息
							_this.findDepts = v.data.deptAll.map(item => {
								return {
									value: item.id,
									label: item.name
								};
							});
							var a = {
								value: 0,
								label: "最高层级"
							};
							_this.findDepts.push(a);
							_this.findDept = _this.findDepts;
							_this.updateDeptfroms.id = v.data.sysDept.id;
							_this.updateDeptfroms.parentid = v.data.sysDept.parentid;
							_this.updateDeptfroms.deptName = v.data.sysDept.name;
							_this.updateDeptfroms.deptSeq = v.data.sysDept.seq;
							_this.updateDeptfroms.textcommunication = v.data.sysDept.remark;
							_this.updateDeptdialog = true;
						}).catch(function() {
							alert("信息出错了");
						});
					},
					findchange(){
						var pageSize= Max.pasSize;
						var statusid=null;
						var search=null;
						var _this=this;
						if(this.value7.toString()== "2"){
							window.location.hash='#/authority/role';
						}else{
							window.location.hash='#/authority/role?statusid='+this.value7;
							statusid=this.value7;
						}
						this.inputtheme='';
						$.ajax({
						      type: "post",
						      url: "/authority/role",
						      data: {pageNum:1,pageSize:pageSize,statusid:statusid,search:search},
						      success: function (sdata) {
						    	  console.log("页数打印*****："+sdata);
						    	 _this.multipleTable=sdata.list;
						    	 _this.pages=sdata;
						    	 _this.currentPage4=sdata.pageNum;
						      }
						});
					},
					updatehandleClick(id) {
						this.myVal=[];
						var _this = this;
						axios.post("/authority/updateRoleview",
							Qs.stringify({
								'ID': id,
							}, {
								arrayFormat: 'brackets'
							})
							//ajax请求成功的回调函数
						).then(function(v) {
							console.log("回调成功，获取了服务器端返回的值v");
							console.log(v.data);
							//将数据装换成界面显示
							//客户信息roleId: '',
							_this.updateRolefroms.roleId = v.data.Role.roleId;
							_this.updateRolefroms.roleName = v.data.Role.roleName;
							_this.updateRolefroms.roletate = v.data.Role.roleState;
							_this.updateRolefroms.roleDescript = v.data.Role.roleDescript;
							//多选择框数据
							 _this.myVal= JSON.parse(v.data.menusAll);
							_this.updateRoledialog = true;
						})
						/* .catch(function() {
													alert("信息出错了");
												}); */
					},
					handleSizeChange(val) {
						Max.pasSize=val;
						var statusid=null;
						var search=null;
						var _this=this;
						//判断是否带条件;
						var url= window.location.href;
						var url1= url.indexOf("?");
						if(url1!=-1){
							//截取每一个条件
							var urlcondition= url.substring(url1+1,url.length).split('&');
							for(var i=0;i<urlcondition.length;i++){
								
								if(urlcondition[i].split('=')[0]=="statusid"){
									statusid=decodeURI(urlcondition[i].split('=')[1]);
								}
								if(urlcondition[i].split('=')[0]=="search"){
									search=decodeURI(urlcondition[i].split('=')[1]);
								}
							}
						}
						$.ajax({
						      type: "post",
						      url: "/authority/role",
						      data: {pageNum:1,pageSize:val,statusid:statusid,search:search},
						      success: function (sdata) {
						    	 console.log("页数打印*****："+sdata);
						    	_this.multipleTable=sdata.list;
						    	_this.pages=sdata;
						    	_this.currentPage4=sdata.pageNum;
						      }
						});
					},
					handleCurrentChange(val) {
						//查询的行数
						var pageSize= Max.pasSize;
						var statusid=null;
						var search=null;
						var _this=this;
						//判断是否带条件;
						var url= window.location.href;
						var url1= url.indexOf("?");
						if(url1!=-1){
							//this.complaintheme=decodeURI(url.substring(url1+1,url.length).split('&')[0].split('=')[1]);
							//截取每一个条件
							var urlcondition= url.substring(url1+1,url.length).split('&');
							for(var i=0;i<urlcondition.length;i++){
								
								if(urlcondition[i].split('=')[0]=="statusid"){
									statusid=decodeURI(urlcondition[i].split('=')[1]);
								}
								if(urlcondition[i].split('=')[0]=="search"){
									search=decodeURI(urlcondition[i].split('=')[1]);
								}
							}
						}
						$.ajax({
						      type: "post",
						      url: "/authority/role",
						      data: {pageNum:val,pageSize:pageSize,statusid:statusid,search:search},
						      success: function (sdata) {
						    	  console.log("页数打印*****："+sdata);
						    	  _this.multipleTable=sdata.list;
						          _this.pages=sdata;
								  _this.currentPage4=sdata.pageNum;
						      }
						});
					},
					deleteDept(id) {
						alert(id);
					},
					
					
					

					submitRoleForm(addRolefroms) {
						
						this.addRolefroms.menus= JSON.stringify(this.myVal);
						var _this = this;
						this.$refs[addRolefroms].validate((valid) => {
							if (valid) {
								//post提交数据
								axios.post("/authority/addRole",
									//参数转换
									Qs.stringify(
										this.addRolefroms, {
											arrayFormat: 'brackets'
										})
									//	params:
									//ajax请求成功的回调函数
								).then(function(v) {
									console.log("回调成功，获取了服务器端返回的值v");
									console.log(v);
									_this.addRoledialog = false;
									showAtRight('/authority/role');
								})/* .catch(function() {
									alert("出错了");
								}); */
							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					updateRoleForm(addDeptfroms) {
						this.updateRolefroms.menus= JSON.stringify(this.myVal);
						var _this = this;
						this.$refs[addDeptfroms].validate((valid) => {
							if (valid) {
								//post提交数据
								axios.post("/authority/updateRole",
									//参数转换
									Qs.stringify(
										this.updateRolefroms, {
											arrayFormat: 'brackets'
										})
									//	params:
									//ajax请求成功的回调函数
								).then(function(v) {
									console.log("回调成功，获取了服务器端返回的值v");
									console.log(v);
									_this.updateRoledialog = false;
									showAtRight('/authority/role');
								}).catch(function() {
									alert("出错了");
								});
							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					//删除角色接口
					DeleteRole() {
						var _this = this;
						axios.post("/sales/prosale/deletetrm",
								//参数转换
								Qs.stringify({
									'ID': _this.ID
								}, {
									arrayFormat: 'brackets'
								})
								//ajax请求成功的回调函数
							).then(function(response) {
								console.log("回调成功，获取了服务器端返回的值v");
								console.log(response.data);
								/* this.$message({
								type: 'success',
								message: '删除成功!'
							}); */
								alert("删除成功！");
								window.location.href = '/sales/prosale/returnMoney';

							})
							.catch(function() {
								alert("删除失败！");
								/*this.$message({
								type: 'error',
								message: '删除失败!'*/
							});
						//这个是数据的初始化
					},
					deleterolehow(ID) {
						this.ID = ID;
						this.dialogDelete = true;

					},
					searchRole(){
						var pageSize= Max.pasSize;
						var statusid=null;
						var search=null;
						var _this=this;
						//判断是否带条件;
						//判断是否根据条件筛选
						if(this.value7.toString()=='2'||this.value7.toString()==''){
							if(this.inputtheme==""){
								window.location.hash='#/authority/role'
							}
							else{
								window.location.hash='#/authority/role?search='+this.inputtheme;
								search=this.inputtheme;
							}
						}else{
							statusid=this.value7.toString();
							if(this.inputtheme==""){
								window.location.hash=window.location.hash.split('&')[0];
							}
							else{
								window.location.hash=window.location.hash.split('&')[0]+'&search='+this.inputtheme;
								search=decodeURI(this.inputtheme);
							}
						}
						$.ajax({
						      type: "post",
						      url: "/authority/role",
						      data: {pageNum:1,pageSize:pageSize,statusid:statusid,search:search},
						      success: function (sdata) {
						    	  console.log("页数打印*****："+sdata);
						    	 _this.multipleTable=sdata.list;
						    	 _this.pages=sdata;
						    	 _this.currentPage4=sdata.pageNum;
						      }
						});
					}

				},
				mounted:function(){
					var url= window.location.href;
					var url1= url.indexOf("?");
					if(url1!=-1){
						this.complaintheme=decodeURI(url.substring(url1+1,url.length).split('&')[0].split('=')[1]);
					}
				}
			});
		</script>
	</body>
</html>
